<!DOCTYPE html>
<html>


<head>
	<title>Framework | Dashboard</title>
	<meta name="robots" content="noindex, follow" />
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />

	<link rel="shortcut icon" href="favicon.ico" />
	<link rel="stylesheet" type="text/css" href="css/framework-all.css">

	<script type="text/javascript" src="js/jquery.js"></script>
	
	<script type="text/javascript" src="js/framework.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/jquery.slimscroll.min.js"></script>
	<script type="text/javascript" src="js/charts/jquery.sparkline.min.js"></script>
	<script type="text/javascript" src="js/charts/flot/jquery.flot.min.js"></script>

</head>
<body class="st-no-select">

<div class="loader-back"><div class="loader2"></div></div>

<div class="navbar">
	<a class="sidebar-toggle"></a>

	<img src="images/fr_logo.png" class="fr-logo">
	
	<a class="second-navbar-toggle"></a>
	<div class="navbar-options">
		<ul>
			<li>
				<a id="btn-fullscreen" href="#"><i class="fa fa-arrows-alt"></i></a>
			</li>
			<li>
				<a>
					<img class="avatar" src="images/avatar1.png">
					<span>James Anderson</span>
				</a>
				<ul>
					<li><a href="#"><i class="fa fa-user"></i> My Profile</a></li>
					<li><a href="#"><i class="fa fa-comments"></i> Messages</a></li>
					<li><a href="#"><i class="fa fa-cog"></i> Settings</a></li>
					<li class="separator"></li>
					<li><a href="lock_screen.html"><i class="fa fa-lock"></i> Lock Account</a></li>
					<li><a href="#"><i class="fa fa-sign-out"></i> Logout</a></li>
				</ul>
			</li>
			<li class="notifications">
				<a>
					<i class="fa fa-bell"></i>
					<span class="badge badge-float red">6</span>
				</a>
				<ul>
					<li class="header">
						<span><strong>6</strong> Notifications</span>
						<span>View all</span>
					</li>
					<ul>
						<li>
							<span class="col-md-2 col-xs-2"><i class="fa fa-plus"></i></span>
							<span class="col-md-8 col-xs-8"><span>Now</span>A new user was added</span>
							<span class="col-md-2 col-xs-2"><i class="fa fa-circle"></i></span>
						</li>
						<li>
							<span class="col-md-2 col-xs-2"><i class="fa fa-times red"></i></span>
							<span class="col-md-8 col-xs-8"><span>1 Hour ago</span>An error occurred</span>
							<span class="col-md-2 col-xs-2"><i class="fa fa-circle"></i></span>
						</li>
						<li>
							<span class="col-md-2 col-xs-2"><i class="fa fa-bolt green"></i></span>
							<span class="col-md-8 col-xs-8"><span>14 Hours ago</span>Server 1 is running full power</span>
							<span class="col-md-2 col-xs-2"><i class="fa fa-circle"></i></span>
						</li>
						<li>
							<span class="col-md-2 col-xs-2"><i class="fa fa-cog teal"></i></span>
							<span class="col-md-8 col-xs-8"><span>16 Hours ago</span>New Settings rule was added</span>
							<span class="col-md-2 col-xs-2"><i class="fa fa-circle"></i></span>
						</li>
						<li>
							<span class="col-md-2 col-xs-2"><i class="fa fa-check purple"></i></span>
							<span class="col-md-8 col-xs-8"><span>22 Hours ago</span>System Updated</span>
							<span class="col-md-2 col-xs-2"><i class="fa fa-circle"></i></span>
						</li>
						<li>
							<span class="col-md-2 col-xs-2"><i class="fa fa-certificate purple"></i></span>
							<span class="col-md-8 col-xs-8"><span>1 Days ago</span>New System updates available</span>
							<span class="col-md-2 col-xs-2"><i class="fa fa-circle"></i></span>
						</li>
					</ul>
				</ul>
			</li>
			<li class="messages">
				<a>
					<i class="fa fa-comments"></i>
					<span class="badge badge-float red">7</span>
				</a>
				<ul>
					<li class="header">
						<span><strong>7</strong> Unread Messages</span>
						<i class="fa fa-plus"></i>
					</li>
					<ul>
						<li>
							<span class="col-md-2 col-xs-2"><img src="images/avatar5.png" class="avatar"></span>
							<span class="col-md-8 col-xs-8">
								<span><span>Connor Gaunt</span> 17 Minutes ago</span>
								Lorem ipsum dolor sit amet, eleifend nunc at at facilisi dui, adipiscing vestibulum eget porttitor elit id vel, justo odio eros at ante id interdum, dignissim sed dolor eu. Praesent id pharetra pede gravida posuere rhoncus.
							</span>
							<span class="col-md-2 col-xs-2"><i class="fa fa-circle"></i></span>
						</li>
						<li>
							<span class="col-md-2 col-xs-2"><img src="images/avatar2.png" class="avatar"></span>
							<span class="col-md-8 col-xs-8">
								<span><span>Brynn Evans</span> 22 Minutes ago</span>
								Lorem ipsum dolor sit amet, eleifend nunc at at facilisi dui, adipiscing vestibulum eget porttitor elit id vel, justo odio eros at ante id interdum, dignissim sed dolor eu. Praesent id pharetra pede gravida posuere rhoncus.
							</span>
							<span class="col-md-2 col-xs-2"><i class="fa fa-circle"></i></span>
						</li>
						<li>
							<span class="col-md-2 col-xs-2"><img src="images/avatar3.png" class="avatar"></span>
							<span class="col-md-8 col-xs-8">
								<span><span>Felipe Santana</span> 2 Hours ago</span>
								Lorem ipsum dolor sit amet, eleifend nunc at at facilisi dui, adipiscing vestibulum eget porttitor elit id vel, justo odio eros at ante id interdum, dignissim sed dolor eu. Praesent id pharetra pede gravida posuere rhoncus.
							</span>
							<span class="col-md-2 col-xs-2"><i class="fa fa-circle"></i></span>
						</li>
						<li>
							<span class="col-md-2 col-xs-2"><img src="images/avatar6.png" class="avatar"></span>
							<span class="col-md-8 col-xs-8">
								<span><span>Mike Lane</span> 6 Hours ago</span>
								Lorem ipsum dolor sit amet, eleifend nunc at at facilisi dui, adipiscing vestibulum eget porttitor elit id vel, justo odio eros at ante id interdum, dignissim sed dolor eu. Praesent id pharetra pede gravida posuere rhoncus.
							</span>
							<span class="col-md-2 col-xs-2"><i class="fa fa-circle"></i></span>
						</li>
						<li>
							<span class="col-md-2 col-xs-2"><img src="images/avatar7.png" class="avatar"></span>
							<span class="col-md-8 col-xs-8">
								<span><span>Alexa Andrzejewski</span> 1 Day ago</span>
								Lorem ipsum dolor sit amet, eleifend nunc at at facilisi dui, adipiscing vestibulum eget porttitor elit id vel, justo odio eros at ante id interdum, dignissim sed dolor eu. Praesent id pharetra pede gravida posuere rhoncus.
							</span>
							<span class="col-md-2 col-xs-2"><i class="fa fa-circle"></i></span>
						</li>
						<li>
							<span class="col-md-2 col-xs-2"><img src="images/avatar8.png" class="avatar"></span>
							<span class="col-md-8 col-xs-8">
								<span><span>Faruk Ates</span> 1 Day ago</span>
								Lorem ipsum dolor sit amet, eleifend nunc at at facilisi dui, adipiscing vestibulum eget porttitor elit id vel, justo odio eros at ante id interdum, dignissim sed dolor eu. Praesent id pharetra pede gravida posuere rhoncus.
							</span>
							<span class="col-md-2 col-xs-2"><i class="fa fa-circle"></i></span>
						</li>
						<li>
							<span class="col-md-2 col-xs-2"><img src="images/avatar4.png" class="avatar"></span>
							<span class="col-md-8 col-xs-8">
								<span><span>Adelle Charles</span> 3 Days ago</span>
								Lorem ipsum dolor sit amet, eleifend nunc at at facilisi dui, adipiscing vestibulum eget porttitor elit id vel, justo odio eros at ante id interdum, dignissim sed dolor eu. Praesent id pharetra pede gravida posuere rhoncus.
							</span>
							<span class="col-md-2 col-xs-2"><i class="fa fa-circle"></i></span>
						</li>
					</ul>
					<li class="showall">
						<i class="fa fa-ellipsis-h"></i>
					</li>
				</ul>
			</li>
			<li id="show-search"><a><i class="fa fa-search"></i></a></li>
		</ul>
		<div class="navbar-search">
			<input placeholder="Search"><span></span>
		</div>
	</div>
</div>

<div class="search-content">
	<input class="control material searh-input" placeholder="Search for anything">
	<span>&times;</span>
</div>

<div class="content-container">
	<div class="sidebar">
		<div class="sidebar-top">
			<span class="sidebar-title">Framework Main Menu</span>
			<a class="sidebar-toggle"></a>
		</div>
		<div class="sidebar-content">
			<ul>
				<li class="selected">
					<a href="index.html"><i class="fa fa-bar-chart"></i> <span>Dashboard</span></a>
				</li>
				<span class="header"><span>User interface</span></span>
				<li>
					<a href="framework.html"><i class="fa fa-code"></i> <span>Framework</span> <span class="label label-primary">1.0</span></a>
				</li>
				<li>
					<a href="#"><i class="fa fa-cube"></i> <span>UI Elements</span></a>
					<ul>
						<li><a href="buttons.html">Buttons</a></li>
						<li><a href="inputs_dropdowns.html">Inputs & Dropdowns</a></li>
						<li><a href="checkboxes_radios.html">Check Boxes & Radios</a></li>
						<li><a href="panels_alerts_notes.html">Panels, Alerts & Notes</a></li>
						<li><a href="grid.html">Grid Layouts</a></li>
						<li><a href="lists.html">Lists</a></li>
						<li><a href="pickers.html">Pickers</a></li>
						<li><a href="typography.html">Typography</a></li>
						<li><a href="modals.html">Modals</a></li>
						<li><a href="notifications.html">Notifications</a></li>
						<li><a href="progress_bars.html">Progress Bars</a></li>
					</ul>
				</li>
				<li>
					<a><i class="fa fa-list-ul"></i> <span>Tables</span></a>
					<ul>
						<li><a href="tables.html">Normal Tables</a></li>
						<li><a href="responsive_tables.html">Responsive Tables</a></li>
						<li><a href="advanced_tables.html">Advanced Tables</a></li>
					</ul>
				</li>
				<li>
					<a><i class="fa fa-font"></i> <span>Font Icons</span></a>
					<ul>
						<li><a href="fontawesome.html">Font Awesome</a></li>
						<li><a href="glyphicons.html">Glyphicons</a></li>
						<li><a href="materialiconic.html">Material Design Iconic</a></li>
					</ul>
				</li>
				<span class="header"><span>More</span></span>
				<li>
					<a><i class="fa fa-reorder"></i> <span>Multi Level Menu</span></a>
					<ul>
						<li><a>Level 1 Link</a></li>
						<li>
							<a>Level 2</a>
							<ul>
								<li><a>Level 2 Link</a></li>
								<li>
									<a>Level 3</a>
									<ul>
										<li><a>Level 3 Link</a></li>
										<li>
											<a>Level 4</a>
											<ul>
												<li><a>Level 4 Link</a></li>
												<li>
													<a>Level 5</a>
													<ul>
														<li><a>Level 5 Link</a></li>
														<li>
															<a>Level 6</a>
															<ul>
																<li><a>Level 6 Link</a></li>
																<li>
																	<a>Level 7</a>
																	<ul>
																		<li><a>Level 7 Link</a></li>
																		<li>
																			<a>Level 8</a>
																			<ul>
																				<li><a>Level 8 Link</a></li>
																				<li>
																					<a>Level 9</a>
																					<ul>
																						<li><a>Level 9 Link</a></li>
																						<li>
																							<a>Level 10</a>
																							<ul>
																								<li><a>Level 10 Link</a></li>
																							</ul>
																						</li>
																					</ul>
																				</li>
																			</ul>
																		</li>
																	</ul>
																</li>
															</ul>
														</li>
													</ul>
												</li>
											</ul>
										</li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>
				</li>
				<li>
					<a><i class="fa fa-pencil"></i> <span>Forms</span></a>
					<ul>
						<li><a href="login.html">Login Form</a></li>
						<li><a href="register.html">Register Form</a></li>
						<li><a href="forgot.html">Forgot Password Form</a></li>
						<li><a href="contactus.html">Contact Us Form</a></li>
						<li><a href="lock_screen.html">Lock Screen</a></li>
					</ul>
				</li>
				<li>
					<a><i class="fa fa-line-chart"></i> <span>Charts</span></a>
					<ul>
						<li><a href="flot.html">Flot Charts</a></li>
						<li><a href="amcharts.html">amChart</a></li>
						<li><a href="sparklines.html">Sparklines Charts</a></li>
					</ul>
				</li>
				<li>
					<a><i class="fa fa-map-marker"></i> <span>Maps</span></a>
					<ul>
						<li><a href="vmaps.html">Vector Maps</a></li>
						<li><a href="gmaps.html">Google Maps</a></li>
					</ul>
				</li>
				<span class="header"><span>Pages</span></span>
				<li>
					<a><i class="fa fa-clone"></i> <span>Extra Pages</span></a>
					<ul>
						<li><a href="blank.html">Blank Page</a></li>
						<li><a href="profile.html">Profile</a></li>
						<li><a href="timeline.html">Timeline</a></li>
						<li><a href="invoice.html">Invoice</a></li>
						<li><a href="pricing.html">Pricing</a></li>
						<li><a href="faq.html">FAQ</a></li>
						<li><a href="coming_soon.html">Coming Soon</a></li>
						<li><a href="under_construction.html">Under Construction</a></li>
						<li><a href="under_maintenance.html">Under Maintenance</a></li>
					</ul>
				</li>
				<li>
					<a><i class="fa fa-exclamation-circle"></i> <span>Error Pages</span></a>
					<ul>
						<li><a href="400.html">400 Bad Request</a></li>
						<li><a href="401.html">401 Unauthorized</a></li>
						<li><a href="403.html">403 Forbidden</a></li>
						<li><a href="404.html">404 Not Found</a></li>
						<li><a href="500.html">500 Internal Server Error</a></li>
						<li><a href="503.html">503 Service Unavailable</a></li>
					</ul>
				</li>
				<span class="header"><span>Documentation</span></span>
				<li>
					<a href="documentation.html"><i class="fa fa-info-circle"></i> <span>Documentation</span></a>
				</li>
				<span class="header"><span>Labels</span></span>
				<li class="lbl-important">
					<a href="#"><i class="fa fa-circle-o"></i> <span>Important Label</span></a>
				</li>
				<li class="lbl-info">
					<a href="#"><i class="fa fa-circle-o"></i> <span>Information Label</span></a>
				</li>
				<li class="lbl-warning">
					<a href="#"><i class="fa fa-circle-o"></i> <span>Warning Label</span></a>
				</li>
			</ul>
		</div>
	</div>

	<div id="content-main">
		<div class="content">
			<div class="page-header">
				<div class="title">
					Dashboard
					<span>Reports & Statistics</span>
				</div>
				
				<ul class="breadcrumb">
				    <li class="active">Dashboard</li>
				</ul>
			</div>

			<div class="content">

				<div class="row">
					<div class="col-md-12">

						<div class="col-md-3">
							<div class="dash-stat light-shadow blue rounded">
								<span id="stat-1" class="dash-stat-chart">
									10,8,9,3,5,8,5,10,8,9,3,5,8,5,10,8,9,3,5,8,5,10,8,9,3,5,8,5
								</span>
								<div class="dash-stat-cont">
									<span class="dash-stat-main">1,633</span>
									<span class="dash-stat-sub">Total Transactions</span>
									<span class="dash-stat-more">View History <i class="fa fa-arrow-right"></i></span>
								</div>
							</div>
						</div>

						<div class="col-md-3">
							<div class="dash-stat light-shadow teal rounded">
								<span id="stat-2" class="dash-stat-chart">10,8,9,3,5,8,5,7</span>
								<div class="dash-stat-cont">
									<span class="dash-stat-main">30%</span>
									<span class="dash-stat-sub">User Activity Increase</span>
									<span class="dash-stat-more">View Full Statistic <i class="fa fa-arrow-right"></i></span>
								</div>
							</div>
						</div>

						<div class="col-md-3">
							<div class="dash-stat light-shadow red rounded">
								<span class="dash-stat-icon"><i class="fa fa-users"></i></span>
								<div class="dash-stat-cont">
									<span class="dash-stat-main">2,427</span>
									<span class="dash-stat-sub">Active Users</span>
									<span class="dash-stat-more">View All Users <i class="fa fa-arrow-right"></i></span>
								</div>
							</div>
						</div>

						<div class="col-md-3">
							<div class="dash-stat light-shadow green rounded">
								<span id="stat-3" class="dash-stat-chart">8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10</span>
								<div class="dash-stat-cont">
									<span class="dash-stat-main">$10,440</span>
									<span class="dash-stat-sub">Total Income</span>
									<span class="dash-stat-more">View History <i class="fa fa-arrow-right"></i></span>
								</div>
							</div>
						</div>

					</div>

					<div class="col-md-12 mg-top-20">
						<div class="col-md-9">
							<div id="test" class="panel light-shadow white title-transparent rounded" data-toggle="true" data-expand="true">
								<div class="panel-title">
									Server Status <span class="label red pull-right">23% Increase</span>
								</div>
								<div class="row">
									<div class="col-md-12">
										<div class="col-md-3 txt-center">
											<strong class="txt-md">52%</strong><br/>CPU Usage
										</div>
										<div class="col-md-3 txt-center">
											<strong class="txt-md">64%</strong><br/>Memory Usage
										</div>
										<div class="col-md-3 txt-center">
											<strong class="txt-md">530GB / 2TB</strong><br/>Disk Space
										</div>
										<div class="col-md-3 txt-center">
											<strong class="txt-md">200MB / 1GB</strong><br/>Database Space
										</div>
									</div>
									<div class="col-md-12 mg-top-15">
										<div id="stat-server" class="chart_container" style="width:100%; height:300px"></div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-3">
							<div class="panel light-shadow white title-transparent rounded" data-title="Productivity"
							data-toggle="true" data-expand="true">
								<div class="row">
									<div class="col-md-12">
										<div class="progress-circle blue p80" data-valuenow="80"
										data-style="m:25px 0 25px calc(50% - 60px)">
											<span data-style="fs:50"><i class="fa fa-cogs"></i></span>
											<div class="slice">
												<div class="bar"></div>
												<div class="fill"></div>
											</div>
										</div>
									</div>
									<div class="col-md-12 txt-center mg-bottom-20">
										<h3><strong>80%</strong></h3>
										<p data-style="mt:-10">Productivity Increase</p>
									</div>
									<div class="col-md-12">
										<div id="stat-productivity" style="height:107px">
										1:2,2:4,3:4,2:2,2,5,2:3,3,3:1:4,3,2,3,4,2:2,4:1,1:2,2:4,5,2,3,5:2
										</div>
									</div>
								</div>
							</div>
						</div>	
					</div>

					<div class="col-md-12 mg-top-20">
						<div class="col-md-7">
							<div class="panel light-shadow white title-transparent rounded" data-title="Visitors Statistics" data-toggle="true" data-expand="true">
								<div class="row">
									<div class="col-md-12">
										<div class="col-md-3 txt-center">
											<strong class="txt-md">2,427</strong><br/>Active Users
										</div>
										<div class="col-md-3 txt-center">
											<strong class="txt-md">3,536</strong><br/>Sessions
										</div>
										<div class="col-md-3 txt-center">
											<strong class="txt-md">10:25</strong><br/>Avg. Session Duration
										</div>
										<div class="col-md-3 txt-center">
											<strong class="txt-md">22,024</strong><br/>Views
										</div>
									</div>
									<div class="col-md-12">
										<div class="col-md-4">
											<div class="progress-circle teal" data-valuenow="46"
											data-style="m:25px 0 25px calc(50% - 60px)">
												<span>
													<span>46%<span class="txt-sm block">Bounce Rate</span></span>
												</span>
												<div class="slice">
													<div class="bar"></div>
													<div class="fill"></div>
												</div>
											</div>
										</div>
										<div class="col-md-4">
											<div class="progress-circle magenta" data-valuenow="74"
											data-style="m:25px 0 25px calc(50% - 60px)">
												<span>
													<span>74%<span class="txt-sm block">Engagement</span></span>
												</span>
												<div class="slice">
													<div class="bar"></div>
													<div class="fill"></div>
												</div>
											</div>
										</div>
										<div class="col-md-4">
											<div class="progress-circle green" data-valuenow="62"
											data-style="m:25px 0 25px calc(50% - 60px)">
												<span>
													<span>62%<span class="txt-sm block">Retention</span></span>
												</span>
												<div class="slice">
													<div class="bar"></div>
													<div class="fill"></div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-5">
							<div class="panel light-shadow white title-transparent rounded" data-title="Browsers Statistics <span class='label green pull-right'>Latest Update: <strong>1/2016</strong></span>" data-toggle="true" data-expand="true">
								<table class="table">
									<tbody>
										<tr>
											<td><strong>Google Chrome</strong></td>
											<td class="txt-teal">
												68.0%
												<div class="progress progress-sm mg-bottom-0"><div class="progress-bar teal" role="progressbar" style="width:68%"></div></div>
											</td>
										</tr>
										<tr>
											<td><strong>Firefox</strong></td>
											<td class="txt-blue">
												19.1%
												<div class="progress progress-sm mg-bottom-0"><div class="progress-bar blue" role="progressbar" style="width:19.1%"></div></div>
											</td>
										</tr>
										<tr>
											<td><strong>Internet Explorer</strong></td>
											<td class="txt-red">
												6.3%
												<div class="progress progress-sm mg-bottom-0"><div class="progress-bar red" role="progressbar" style="width:6.3%"></div></div>
											</td>
										</tr>
										<tr>
											<td><strong>Safari</strong></td>
											<td class="txt-orange">
												3.7%
												<div class="progress progress-sm mg-bottom-0"><div class="progress-bar orange" role="progressbar" style="width:3.7%"></div></div>
											</td>
										</tr>
										<tr>
											<td><strong>Opera</strong></td>
											<td class="txt-dark">
												1.5%
												<div class="progress progress-sm mg-bottom-0"><div class="progress-bar dark" role="progressbar" style="width:1.5%"></div></div>
											</td>
										</tr>
										<tr>
											<td><strong>Others</strong></td>
											<td class="txt-magenta">
												1.4%
												<div class="progress progress-sm mg-bottom-0"><div class="progress-bar magenta" role="progressbar" style="width:1.4%"></div></div>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
		<div class="footer">
			<span class="pull-left">
				&copy; 2016. <a href="#">Framework</a> by <a href="http://themeforest.net/user/templatedevelopers" target="_blank">TemplateDevelopers</a>
			</span>
			<span class="pull-right">Designed with <i class="fa fa-heart txt-red"></i></span>
		</div>
	</div>
</div>

<div class="demo_settings">
	<a class="toggleBtn btn"><i class="fa fa-cog"></i></a>
	<div class="demoHeader clearfix">
		<span class="pull-left">Framework Settings</span>
		<a id="settingsDefaults" class="control white rounded small pull-right"
			data-style="m:-6px -8px 0 0">
			Defaults
		</a>
	</div>

	<div id="settings" class="row">
		<div class="col-md-12">
			<p class="txt-bold">Layout Style</p>
			<div class="col-md-6">
				<input type="radio" id="wideSetting" class="control circle box blue" checked="" name="layout">
				<label for="wideSetting"><span></span>Wide</label>
			</div>
			<div class="col-md-6">
				<input type="radio" id="boxedSetting" class="control circle box blue" name="layout">
				<label for="boxedSetting"><span></span>Boxed</label>
			</div>
		</div>

		<div class="col-md-12 mg-top-15">
			<p class="txt-bold col-md-12 no-padding mg-top-10">Main Color Scheme</p>
			<div id="schemeSetting" class="col-md-12 mg-top-10 clearfix">
				<a id="def" class="demo_color circle selected pull-left size-20"><i class="fa fa-asterisk"></i></a>
				<a id="teal" class="demo_color circle teal pull-left size-20"></a>
				<a id="green" class="demo_color circle green pull-left size-20"></a>
				<a id="blue" class="demo_color circle blue pull-left size-20"></a>
				<a id="lightblue" class="demo_color circle lightblue pull-left size-20"></a>
				<a id="cyan" class="demo_color circle cyan pull-left size-20"></a>
				<a id="magenta" class="demo_color circle magenta pull-left size-20"></a>
				<a id="purple" class="demo_color circle purple pull-left size-20"></a>
				<a id="pink" class="demo_color circle pink pull-left size-20"></a>
				<a id="dark" class="demo_color circle dark pull-left size-20"></a>
				<a id="yellow" class="demo_color circle yellow pull-left size-20"></a>
				<a id="orange" class="demo_color circle orange pull-left size-20"></a>
				<a id="red" class="demo_color circle red pull-left size-20"></a>
				<a id="lightgrey" class="demo_color circle lightgrey pull-left size-20"></a>
				<a id="grey" class="demo_color circle grey pull-left size-20"></a>
				<a id="white" class="demo_color circle white pull-left size-20"></a>
			</div>
		</div>

		<div class="col-md-12">
			<p class="txt-bold col-md-12 no-padding mg-top-10">Navbar Color</p>
			<div id="navbarSchemeSetting" class="col-md-12 mg-top-10 clearfix">
				<a id="def" class="demo_color circle selected pull-left size-20"><i class="fa fa-asterisk"></i></a>
				<a id="teal" class="demo_color circle teal pull-left size-20"></a>
				<a id="green" class="demo_color circle green pull-left size-20"></a>
				<a id="blue" class="demo_color circle blue pull-left size-20"></a>
				<a id="lightblue" class="demo_color circle lightblue pull-left size-20"></a>
				<a id="cyan" class="demo_color circle cyan pull-left size-20"></a>
				<a id="magenta" class="demo_color circle magenta pull-left size-20"></a>
				<a id="purple" class="demo_color circle purple pull-left size-20"></a>
				<a id="pink" class="demo_color circle pink pull-left size-20"></a>
				<a id="dark" class="demo_color circle dark pull-left size-20"></a>
				<a id="yellow" class="demo_color circle yellow pull-left size-20"></a>
				<a id="orange" class="demo_color circle orange pull-left size-20"></a>
				<a id="red" class="demo_color circle red pull-left size-20"></a>
				<a id="lightgrey" class="demo_color circle lightgrey pull-left size-20"></a>
				<a id="grey" class="demo_color circle grey pull-left size-20"></a>
				<a id="white" class="demo_color circle white pull-left size-20"></a>
			</div>
		</div>

		<div class="col-md-12">
			<p class="txt-bold col-md-12 no-padding mg-top-10">Sidebar Color</p>
			<div id="sidebarSchemeSetting" class="col-md-12 mg-top-10 clearfix">
				<a id="def" class="demo_color circle selected pull-left size-20"><i class="fa fa-asterisk"></i></a>
				<a id="teal" class="demo_color circle teal pull-left size-20"></a>
				<a id="green" class="demo_color circle green pull-left size-20"></a>
				<a id="blue" class="demo_color circle blue pull-left size-20"></a>
				<a id="lightblue" class="demo_color circle lightblue pull-left size-20"></a>
				<a id="cyan" class="demo_color circle cyan pull-left size-20"></a>
				<a id="magenta" class="demo_color circle magenta pull-left size-20"></a>
				<a id="purple" class="demo_color circle purple pull-left size-20"></a>
				<a id="pink" class="demo_color circle pink pull-left size-20"></a>
				<a id="dark" class="demo_color circle dark pull-left size-20"></a>
				<a id="yellow" class="demo_color circle yellow pull-left size-20"></a>
				<a id="orange" class="demo_color circle orange pull-left size-20"></a>
				<a id="red" class="demo_color circle red pull-left size-20"></a>
				<a id="lightgrey" class="demo_color circle lightgrey pull-left size-20"></a>
				<a id="grey" class="demo_color circle grey pull-left size-20"></a>
				<a id="white" class="demo_color circle white pull-left size-20"></a>
			</div>
		</div>

		<div class="col-md-12 mg-top-25">
			<input type="checkbox" id="sidebarOverlaySetting" class="control slide2 blue">
			<label for="sidebarOverlaySetting" class="mg-left-5"><span></span>Sidebar Overlay</label>
		</div>

		<div class="col-md-12">
			<input type="checkbox" id="sidebarClosedSetting" class="control slide2 blue">
			<label for="sidebarClosedSetting" class="mg-left-5"><span></span>Sidebar Closed</label>
		</div>

		<div class="col-md-12">
			<input type="checkbox" id="sidebarSolidSetting" class="control slide2 blue">
			<label for="sidebarSolidSetting" class="mg-left-5"><span></span>Sidebar Solid Color</label>
		</div>

		<div class="col-md-12">
			<input type="checkbox" id="sidebarHoverSetting" class="control slide2 blue">
			<label for="sidebarHoverSetting" class="mg-left-5"><span></span>Sidebar Hover</label>
		</div>
		
		<div class="col-md-12">
			<input type="checkbox" id="roundedSetting" class="control slide2 blue">
			<label for="roundedSetting" class="mg-left-5"><span></span>Rounded Corner Controls</label>
		</div>
	</div>
</div>

<script type="text/javascript" src="js/dashboardDemo.js"></script>
<script type="text/javascript" src="js/styleDemo.js"></script>
</body>

<!-- Mirrored from framework.tag-developers.com/template/index.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 05 Apr 2016 08:55:04 GMT -->
</html>